<script>
import { MessagePlugin } from 'tdesign-vue-next';
import axios from 'axios';
const wwwHost = import.meta.env.VITE_APP_DOMAIN_URL
export default {
    name: 'enterAdvicePage',

    data() {
        return {
            formData: {},
            FORM_RULES: {
                username: [
                    { required: true, message: '用户名', type: 'error', trigger: 'blur' },
                    { min: 3, message: '用户名应大于3位小于12位', type: 'error', trigger: 'blur' },
                    { max: 12, message: '用户名应大于3位小于12位', type: 'error', trigger: 'blur' },
                    { whitespace: true, message: '用户名不能为空格' },
                ],
                password: [
                    { required: true, message: '密码必填', type: 'error' }
                ]

            }
        }
    },

    methods: {
        doSth: function () {

        },

        onLogin: function (validateResult, firstError, e) {
            console.log('用户登录', this.formData)
            const url = wwwHost + "/user/login"
                if (validateResult.validateResult === true) {
                    var that = this
                    axios.post(url, that.formData).then(res => {
                    that.message = res.data.msg

                    if(res.data.data.isLogin){
                        MessagePlugin.success(that.message);
                        this.$router.push("/");
                    }else{
                        MessagePlugin.warning(that.message);
                    }

                }).catch(err => {
                    //给出错误提示                
                    //alert(err)
                    console.log(err);
                })
            } else {
                console.log('Validate Errors: ', validateResult);
                MessagePlugin.warning(validateResult.firstError);
            }
        }
    },

    created() {

    }
}
</script>

<template>
    <div class="max-w-md mx-auto mt-10 p-6 bg-white rounded-md shadow-md">
        <h1 class="text-2xl font-bold mb-4">用户登录</h1>
        <t-form :form="form" :rules="FORM_RULES" :data="formData" @reset="onReset" @submit="onLogin">
            <t-form-item label="用户名" name="username">
                <t-input type="text" v-model="formData.username">
                    <template #prefix-icon>
                        <t-icon name="user" />
                    </template>
                </t-input>
            </t-form-item>

            <t-form-item label="密码" name="password">
                <t-input type="password" v-model="formData.password">
                    <template #prefix-icon>
                        <t-icon name="lock-on" />
                    </template>
                </t-input>
            </t-form-item>

            <t-form-item>
                <t-space size="small">
                    <t-button theme="primary" type="submit">登录</t-button>
                    <t-button theme="default" variant="base" @click="$router.push('/register')">注册</t-button>
                </t-space>
            </t-form-item>
        </t-form>

    </div>
</template>